<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="css/base.css">
	<title>Document</title>
	<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#hide").click(function(){
				$("h1").hide(1000,function(){
					alert("The paragraph is now hidden");
				});
			});
			$("#show").click(function(){
				$("h1").show();
			});



			$("#toggle").click(function(){
				$("p").toggle();
			});



			$("#fade").click(function(){
				$("#div1").fadeToggle();
				$("#div2").fadeToggle("slow");
				$("#div3").fadeTo("slow",0.15);
			});



			$(".flip").click(function(){
				$(".panel").slideDown(5000);
			});
			$("#stop").click(function(){
				$(".panel").stop();
			});



			$("#animate").click(function(){
				var div=$("#ani");
				div.animate({height:'300px',opacity:'0.4'},"slow");
				div.animate({width:'300px',opacity:'0.8'},"slow");
				div.animate({height:'100px',opacity:'0.4'},"slow");
				div.animate({width:'100px',opacity:'0.8'},"slow");
			});



			$("#start").click(function(){
				$("#hello").animate({left:"100px"},5000)
				    .animate({fontSize:"3em"},5000);
			});
			$("#stop1").click(function(){
				$("#hello").stop();
			});
			$("#stop2").click(function(){
				$("#hello").stop(true);
			});
			$("#stop3").click(function(){
				$("#hello").stop(true,true);
			});
		});
	</script>
</head>
<body>
	<h1>如果点击“隐藏”按钮，我就会消失。</h1>
	<button id="hide" type="button">隐藏</button>
	<button id="show" type="button">显示</button>

	<button type="button" id="toggle">切换</button>
	<p>这是一个段落</p>
	<p>这是另外一个段落</p>

	<p>演示带有不同参数的 fadeIn() 方法。</p>
    <button type="button" id="fade">点击这里，使三个矩形淡入</button>
    <br>
    <br>
    <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
    <br>
    <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
    <br>
    <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

    <button id="stop">停止滑动</button>
    <div class="panel">
    	<p>W3School - 领先的 Web 技术教程站点</p>
    	<p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
    </div>
    <p class="flip">请点击这里</p>
    <br>

    <button id="animate">开始动画</button>
    <p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute;" id="ani"></div>

    <br>
    <br>
    <br>
    <br>
    <br>
    <br>

    <button id="start">开始</button>
    <button id="stop1">停止</button>
    <button id="stop2">停止所有</button>
    <button id="stop3">停止但要完成</button>
    <p><b>"开始"</b> 按钮会启动动画。</p>
    <p><b>"停止"</b> 按钮会停止当前活动的动画，但允许已排队的动画向前执行。</p>
    <p><b>"停止所有"</b> 按钮停止当前活动的动画，并清空动画队列；因此元素上的所有动画都会停止。</p>
    <p><b>"停止但要完成"</b> 会立即完成当前活动的动画，然后停下来。</p>
    <div style="background:#98bf21;height:100px;width:200px;position:absolute;" id="hello">HELLO</div>




    
</body>
</html>